import { Layout, Menu, Spin } from 'antd';
import React, { Component } from 'react'
import { Link, Redirect, Route, Switch } from 'react-router-dom'
import { checkLogin } from '../../api/user';
import ArticleMani from './articles';
import Login from './login/Login';

const { Header, Content, Footer } = Layout;

interface IProps { }
interface IState {
    isLogin: boolean
    isLoading: boolean
}
export default class index extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            isLogin: false,
            isLoading: true
        }
    }

    async componentDidMount() {
        //检查是否已经登录
        const res = await checkLogin();
        if (!!res) {
            this.changeLoginStatus(!!res);
        }
        //停止旋转
        this.setState({
            isLoading: false
        })
    }
    //更新登录状态
    changeLoginStatus = (isLogin: boolean) => {
        this.setState({
            isLogin
        })
    }
    render() {
        return (
            <Spin spinning={this.state.isLoading} size="large">
                <Layout style={{ minHeight: '100vh' }}>
                    <Header className="site-layout-sub-header-background" style={{ padding: 0 }}>
                        <Menu theme="light" mode="horizontal" defaultSelectedKeys={['2']}>
                            <Menu.Item key="home"><Link to='/'>首页</Link></Menu.Item>
                            <Menu.Item key="article"><Link to='/mani/article'>文章</Link></Menu.Item>
                        </Menu>
                    </Header>
                    <Content style={{ margin: '24px 16px 0' }}>
                        <Layout>
                            {this.state.isLogin === false ?
                                (<Login changeLoginStatus={this.changeLoginStatus} />)
                                :
                                (<Content>
                                    <Switch>
                                        <Route path='/mani/article' component={ArticleMani} />
                                        <Redirect to='/mani/article' />
                                    </Switch>
                                </Content>)
                            }

                        </Layout>
                    </Content>
                    <Footer style={{ textAlign: 'center' }}>&copy; {new Date().getFullYear()}-foriL</Footer>
                </Layout>
            </Spin>
        )
    }
}
